import { Translation, useTranslation } from "react-i18next";

function Hello() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <p>{t("title")}</p>
      <button onClick={() => i18n.changeLanguage("en")}>切换至 en</button>
      <button onClick={() => i18n.changeLanguage("zhCN")}>切换至 zhCN</button>
    </div>
  );
}

export default function Page() {
  return (
    <Translation>
      {(t, { i18n }) => (
        <div>
          <h1>App</h1>
          <button onClick={() => i18n.changeLanguage("en")}>切换至 en</button>
          <button onClick={() => i18n.changeLanguage("zhCN")}>
            切换至 zhCN
          </button>
          <hr />
          <ul>
            <li>{t("title")}</li>
            <li>{t("Welcome to React")}</li>
          </ul>

          <hr />
          <Hello />
        </div>
      )}
    </Translation>
  );
}
